<template>
  <div>
    <ul>
      <router-link to="/films/nowplaying" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'wangactive' : ''">
          正在热映
        </li>
      </router-link>
      <router-link to="/films/comingsoon" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'wangactive' : ''">
          即将上映
        </li>
      </router-link>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.wangactive {
  color: red;
  border-bottom: 2px solid red;
}
ul{
  list-style: none;
  display: flex;
  height: 3.0625rem;
  line-height: 3.0625rem;
  background: white;
  li{
    flex: 1;
    text-align: center;
  }
}
</style>
